<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>登录页面</title>
	<link rel="stylesheet" href="../static/css/bootstrap.css">
	<link rel="stylesheet" href="../static/css/login.css">
	<script src="../static/js/jquery.js"></script>
	<script src="../static/js/bootstrap.js"></script>
</head>
<body>
	<nav class="navbar navbar-default">
		<div class="navbar-header" style="margin-left: 50px;margin-top: -10px">
			<a href="/index/toIndex"><h3>家政服务系统</h3></a>
		</div>

		<div>
			<ul class="nav navbar-nav">
				<li>
					<a href="/index/toIndex">
						<span class="glyphicon glyphicon-home"></span>
						首页
					</a>
				</li>
				<li>
					<a href="/user/toRegister">
						<span class="glyphicon glyphicon-user"></span>
						注册
					</a>
				</li>
				<li>
					<a href="/user/toLogin">
						<span class="glyphicon glyphicon-log-in"></span>
						登录
					</a>
				</li>
			</ul>
		</div>
	</nav>

	<div class="container">
		<h2>用户登录</h2>
		<form class="form-horizontal" action="#" role="form">
			<div class="form-group">
				<label class="col-md-2 control-label">手机号码</label>
				<div class="col-md-10">
					<input name="username" class="form-control" type="text" placeholder="请输入手机号码">
				</div>
				<div class="small info text-danger">
					<span class="phone-check"></span>
				</div>
			</div>

			<div class="form-group">
				<label class="col-md-2 control-label">密码</label>
				<div class="col-md-10">
					<input name="password" class="form-control" type="password" placeholder="请输入密码">
				</div>
				<div class="small info text-danger">
					<span class="pwd-check"></span>
				</div>
			</div>

			<div class="form-group">
				<label class="col-md-2 control-label">验证码</label>
				<div class="col-md-10">
					<div class="col-md-6 code1">
						<input name="vertifyCode" class="form-control" type="text" placeholder="请输入验证码">
					</div>
					<div class="col-md-6 code2">
					<!--	<img src="/captcha" width="222" height="34" id="vertifyCode"/>-->
						<img id="imgVerify" width="110" height="34" src="" onclick="getVerify();" alt="点击更换验证码"/>
						<a href="#" onclick="getVerify();" rel="nofollow">看不清，换一张</a>
					</div>
				</div>
				<div class="small info text-danger">
					<span class="code-check"></span>
				</div>
			</div>

			<div class="to-register">
				<a class="text-warning" href="/user/toRegister">还没有账号？立即注册</a>
			</div>

			<div class="form-group" style="text-align: center">
				<input id="submit" type="button" class="btn btn-primary" value="登录">
				<input type="button" class="btn btn-default" value="取消">
			</div>
		</form>
	</div>


</body>
</html>
<script>
	var curWwwPath = window.location.href;
	var pathName = window.location.pathname;
	var ctx = curWwwPath.substring(0,curWwwPath.indexOf(pathName));

	$(".form-control").eq(0).blur(
        function () {
            var pattern = /^1[34578]\d{9}$/;
            var flag = false;
            if ($(this).val() == "") {
                $(".phone-check").html("手机号码不能为空！请重新填写。");
                flag = true;
            } else if ($(this).val().length != 11) {
                $(".phone-check").html("请输入有效的手机号码!");
                flag = true;
            } else if (!(pattern.test($(this).val()))) {
                flag = true;
            } else {
                flag = false;
            }

            if (flag) {
                $(".phone-check").show();
            } else {
                $(".phone-check").hide();
            }
        }
    );
    $(".form-control").eq(1).blur(
        function () {
            if ($(this).val() == "") {
                $(".pwd-check").html("密码不能为空！请重新填写。");
                $(".pwd-check").show();
            } else {
                $(".pwd-check").hide();
            }
        }
    );

    $(".form-control").eq(2).blur(
    	function () {
			var thisVal = $(this).val();
			var codeVal = $(".form-control").eq(3).text();
			if (thisVal == "") {
				$(".code-check").html("验证码不能为空！请重新填写。")
			}
		$(".code-check").show();
    });

	$("#submit").click(function () {
	    var url = ctx + "/user/login";
		var username = $("input[name='username']").val();
		var password = $("input[name='password']").val();
		var inputStr = $("input[name = 'vertifyCode']").val();
		// 验证码转大写,不区别大小写
		var vertifyCode = inputStr.toUpperCase();
		var data = "username=" + username + "&password=" + password + "&vertifyCode=" + vertifyCode;
		$.ajax({
			"url": url,
			"data": data,
			"type": "post",
			"dataType": "json",
			"success": function (json) {
				if (json.state == 200) {
				    alert("登录成功！");
				    if (json.data == -1) {
						window.location.href = "/admin/toAdminIndex";
					} else {
				    	window.location.href = "/index/toIndex";
					}
				} else if (json.state == 404) {
				    alert(json.message)
				} else if (json.state == 405) {
					alert(json.message);
				} else if (json.state == 502) {
					$(".code-check").html("验证码输入错误，请重新填写！")
					$(getVerify())
				}
            }
		})
    });

	$(document).ready(function () {
		console.log(ctx)
		//首次获取验证码
		$("#imgVerify").attr("src","/getVerify?"+Math.random());
	});
	//获取验证码
	function getVerify(){
		var src1=document.getElementById('imgVerify')
		src1.src = "/getVerify?"+Math.random();
	}


</script>